<style>
    .g-container {
        padding: 10px;
    }
    .g-input {
        display: flex;
        align-items: center;
        background: #fff;
    }
    .g-input input {flex:1;}
    .g-input > view {width: 68upx;}
    .g-input image {
        width: 44upx;
        margin-right: 10px;
    }
    .g-input .u-phone {width: 38upx;}
    .g-type picker {
        flex: 1;
        position: relative;
        z-index: 2;
        color: #000000;
    }
    .u-finish {
        width: 90%;
        margin:50upx auto;
        background: #d71611;
        color: #fff;
        padding: 12px 0;
        border-radius: 100px;
        box-shadow: 0 0 10px rgba(0,0,0,.2);
    }
</style>
<template>
	<view class="page">
		<view class="g-container">持卡人信息</view>
        <view class="g-input g-container f-border1px">
            <view><image src="../../../../static/icons/user/people.png" mode="widthFix"></image></view>
            <input type="text" placeholder="请输入持卡人名字" placeholder-style="color:#cecccf" v-model="sName">
        </view>
        <!-- <view class="g-input g-container f-border1px">
            <view><image src="../../../../static/icons/user/card.png" mode="widthFix"></image></view>
            <input type="text" placeholder="请输入持卡人身份证号码" placeholder-style="color:#cecccf" v-model="sId">
        </view> -->
        <view class="g-container" :style="{fontSize: '12px',color: '#bebabd'}">为保证账户和资金安全，请填写本人真实信息，认证后不可更改</view>
        
        <view class="g-container">银行卡信息</view>
        <view class="g-type g-input g-container f-border1px">
            <view><image src="../../../../static/icons/user/card2.png" mode="widthFix"></image></view>
            <picker mode="selector" :range="aType" @change="selectType"><text>{{sType ? sType : '请输入银行卡类型'}}</text></picker>
        </view>
		<view class="g-input g-container f-border1px">
		    <view><image src="../../../../static/icons/user/card2.png" mode="widthFix"></image></view>
		    <input type="text" placeholder="请输入银行名" placeholder-style="color:#cecccf" v-model="sBrank">
		</view>
		<view class="g-input g-container f-border1px">
		    <view><image src="../../../../static/icons/user/card2.png" mode="widthFix"></image></view>
		    <input type="text" placeholder="请输入银行分行名" placeholder-style="color:#cecccf" v-model="sBranch">
		</view>
		<view class="g-input g-container f-border1px">
		    <view><image src="../../../../static/icons/user/edit1.png" mode="widthFix"></image></view>
		    <input type="digit" placeholder="请输入银行卡号" placeholder-style="color:#cecccf" v-model="sCard" maxlength="19">
		</view>
        <view class="g-input g-container f-border1px">
            <view><image class="u-phone" src="../../../../static/icons/user/phone.png" mode="widthFix"></image></view>
            <input type="number" placeholder="请输入银行预留手机号" placeholder-style="color:#cecccf" v-model="sPhone" maxlength="11">
        </view>
		
		<button class="u-finish" @tap="info_edit" v-if="isEdit">完 成 修 改</button>
		
        <button class="u-finish" @tap="info_add" v-if="isAdd">完 成</button>
		<view class="m-loading" v-if="isShowLoading">
		    <image src="../../../../static/images/loading.gif" mode="widthFix"></image>
		    <text>加载中</text>
		</view>
		
	</view>
</template>

<script>
    import henglang from '@/common/common.js';
	export default {
		data() {
			return {
				sName: '',
                // sId: '',
                aType: ['借记卡','信用卡'],
                sType: '',
                sBrank: '',
                sPhone: '',
				sBranch: '',
				sCard: '',
				sId: '',
				isEdit: false,
				isShowLoading: false,
				isAdd: true,
			};
		},
        methods: {
            selectType(e) {
                this.sType = this.aType[e.target.value];
				uni.hideKeyboard()
            },
			//检查资料信息
            checkInfo() {
				let that = this;
                if (!that.sName) {
                    henglang.showToast('请输入正确的持卡人名字');
                    return false;
                }
//                 if (!/^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/.test(that.sId)) {
//                     henglang.showToast('请输入正确的身份证号码');
//                     return;
//                 }
                if (!that.sType) {
                    henglang.showToast('请输入选择银行卡类型');
                    return false;
                }
				if (!that.sBrank) {
				    henglang.showToast('请输入正确的银行名');
				    return false;
				}
				if (!that.sBranch) {
				    henglang.showToast('请输入正确的银行分行名');
				    return false;
				}
                if (!that.sCard) {
                    henglang.showToast('请输入正确的银行卡号');
                    return false;
                }
                if (!henglang.checkPhone(that.sPhone)) {
                    henglang.showToast('请输入正确的手机号');
                    return false;
                }
				that.isShowLoading = true;
				return true;
            },
			//添加银行卡信息
			info_add() {
				let that = this;
				if(that.checkInfo()){
					henglang.post('bank_card/add',{
						id: that.sId,
						name: that.sName,
						bank: that.sBrank,
						card_no: that.sCard,
						branch: that.sBranch,
						type: that.sType,
						phone: that.sPhone,
					},true,function(res){
						that.isShowLoading = false;
						if(res.data.code == 0){
							henglang.showToast(res.data.msg,500);
							setTimeout(() => {
								uni.navigateBack()
							}, 500);
						}else{
							henglang.showToast(res.data.msg);
						}
						
					},function(res){
						henglang.showToast('请求失败');
						return;
					});
				};
			},
			//修改银行卡信息
			info_edit() {
				let that = this;
				if(that.checkInfo()){
					henglang.post('bank_card/edit',{
						id: that.sId,
						name: that.sName,
						bank: that.sBrank,
						card_no: that.sCard,
						branch: that.sBranch,
						type: that.sType,
						phone: that.sPhone,
					},true,function(res){
						that.isShowLoading = false;
						if(res.data.code == 0){
							henglang.showToast(res.data.msg,500);
							setTimeout(() => {
								uni.navigateBack()
							}, 500);
						}else{
							henglang.showToast(res.data.msg);
						}
						
					},function(res){
						henglang.showToast('请求失败');
						return;
					});
				}
			}
        },
		//修改信息的时候传进来的参数
		onLoad({id,name,type,card_no,bank,branch,phone,isedit}) {
			let that = this;
			that.sId = id;
			that.sName = name;
			that.sType = type;
			that.sBrank = bank;
			that.sCard = card_no;
			that.sBranch = branch;
			that.sPhone = phone;
			that.isEdit = isedit;
			if(that.isEdit){
				that.isAdd = false;
				uni.setNavigationBarTitle({
					title: '编辑信用卡'
				});
			}
		}
		
	}
</script>


